<template>
	<view class="content">
		<view class="pub">
			<view class="pub-add">
				<u-upload upload-text="上传视频" custom-btn ref="uUpload" :action="action" :auto-upload="false" >
					<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
						<view class="video">
							<view class="video-center">
								<u-icon name="plus" color="#acadad" size="48"></u-icon>
							</view>
							<view>{{addText}}</view>
						</view>
					</view>
				</u-upload>
			</view>
			<view class="title">
				<view class="input">
					<u-input v-model="titles" height="80" type="text" placeholder="添加标题" />
				</view>
			</view>
			<view class="des">
				<view class="textarea">
					<u-input v-model="des" type="textarea" placeholder="添加文案" height="50" />
				</view>
			</view>
		</view>
		<view class="submits">
			<view class="btn" @click="submit">
				发布
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action: "http://localhost/upload",
				addText: "上传视频",
				titles: "",
				des: "",
				inputClass: {background: white},
				index:0,
			}
		},
		methods: {
			submit() {
				if(this.titles == "") {
					console.log("没有输入标题")
					console.log()
					uni.showToast({
						icon: "error",
						title: "请补充标题"
					})
					this.input = "";
					this.des = "";
					return;
				}
				if(this.des == "") {
					uni.showToast({
						icon: "error",
						title: "请补充文案"
					})
					this.input = "";
					this.des = "";
					return;
				}
				this.$refs.uUpload.upload();
				this.input = "";
				this.des = "";
				uni.showToast({
					icon: "success",
					title: "发布成功"
				})
				
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-image: linear-gradient( to bottom , #FDECEA, #d6d8ec);
		height: auto;
		min-height: 100vh;
		padding: 1rpx;
		.pub {
			height: 800rpx;
			width: 90%;
			margin: 20rpx 40rpx 30rpx 40rpx;
			text-align: center;
			border-radius: 30rpx;
			background-color: #fcf5f4;
			.pub-add{
				padding: 60rpx 0 30rpx 35%;
				.slot-btn {
					.video {
						height: 190rpx;
						width: 190rpx;
						border: 4rpx solid #acadad;
						background-color: rgba(253, 253, 253, 0.1);
						border-radius: 20rpx;
						text-align: center;
						padding: 40rpx 0 0 8rpx;
						.video-center {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
							border: 3rpx solid #acadad;
							padding: 25rpx 0 0 0;
							margin-left: 35rpx;
							margin-bottom: 10rpx;
						}
					}
				}
			}
			.title {
				.input {
					height: 80rpx;
					border-radius: 60rpx;
					background-color: white;
					margin: 10rpx 30rpx 30rpx 30rpx;
					padding-left: 40rpx;
					padding-right: 40rpx;
				}
			}
			.des {
				.textarea {
					height: 370rpx;
					border-radius: 50rpx;
					background-color: white;
					margin: 10rpx 30rpx 10rpx 30rpx;
					padding: 20rpx 50rpx 10rpx 25rpx;
				}
			}
		}
		.submits {
			.btn {
				height: 100rpx;
				margin: 30rpx 35rpx 20rpx 40rpx;
				background-color: #fdd4d4;
				border-radius: 65rpx;
				text-align: center;
				line-height: 100rpx;
				font-size: 40rpx;
				color: white;
				letter-spacing: 25rpx;
			}
		}
	}
</style>
